<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航和导航条</title>
		<script type="text/javascript" src="js/jquery-2.1.3.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<script src="js/TweenMax.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/audioplayer.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="navandnavbar.css"/>
		<link rel="stylesheet" type="text/css" href="css/audioplayer.css"/>
		<script src="js/myJS/navandnavbar.js"></script>
		 <script>
		    	
             $(function(){
                 $( 'audio' ).audioPlayer();
                 var $play = $('#wrapper');
                 $play.hide();
                 $('#play').click(function(){
                 		$play.show();
                 } );
              });
		    </script>
		<style>
		     body{
		     	position: relative;
		     }
			.content{
				color: red;
				font-size: 12px;
			}
			#footer{
				font-size: 16px;
				color: goldenrod;
			}
			.footnote,.noteli{
				font-size: 16px;
				color: darkgoldenrod;
			}
			.linkcontent{
				color: black;
			}
		</style>
	</head>
	<body data-spy="scroll" data-target="#myScrollspy">
		    <nav class="navbar navbar-inverse navbar-fixed-top">
      	<div class="container-fluid">
      		<div class="collapse navbar-collapse">
      			<ul class="nav navbar-nav">
      				<li><a href="#">Home</a></li>
      				<li><a href="#">Library</a></li>
      				<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">
      					Bootstrap<span class="caret"></span>
      				</a>
      						<ul class="dropdown-menu" role="menu">
      							<li><a href="#">Home</a></li>
			      				<li><a href="#">Library</a></li>
			      				<li><a href="#">Home</a></li>
			      				<li><a href="#">Library</a></li>
      						</ul>
      				
      				</li>
      			</ul>
                <form class="navbar-form navbar-left">
                	<div class="form-group">
                		<input type="text" class="form-control" placeholder="Search" />
                	</div>
                		<button class="btn btn-default" role="button">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
      				<li><a href="#">Home</a></li>
      				<li><a href="#">Library</a></li>
      				<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">
      					Bootstrap<span class="caret"></span>	
      				</a>
      						<ul class="dropdown-menu" role="menu">
      							<li><a href="#">Home</a></li>
			      				<li><a href="#">Library</a></li>
			      				<li><a href="#">Home</a></li>
			      				<li><a href="#">Library</a></li>
      						</ul>
      				</li>
      			</ul>
      		</div>
      	</div>
      </div>
      </nav>
      <div class="jumbotron">
      	<div class="container">
      		<h1>个人网站</h1>
				<p>This is a template for a simple marketing or informational website.
				   It includes a large callout called a jumbotron and three supporting 
				   pieces of content. Use it as a starting point to create something more unique
				</p>
				<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
      	</div>		
		</div>
			<div id="scrollexample">
			<div  class="affix1" >
				<ul data-spy="affix" data-offset-top="0" class="nav nav-tabs nav-stacked" role="tablist">
					<li><a href="#music">Music</a></li>
					<li><a href="#pictures">Pictures</a></li>
					<li><a href="#accordion">Collapse</a></li>
					<li><a href="#carousel-example-generic">Carousel</a></li>
			    </ul>
			</div>	
			</div>
		
		<div class="container">
			<div class="row" id="music">
				<div class="col-md-4">
					<h1>残酷月光</h1>
					<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus a
						c cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
						 sit amet risus. Etiam portasem malesuada magna mollis euismod. Donec sed odio dui.
					</p>
				   <p><a class="btn btn-primary btn-lg" href="#wrapper" id="play" role="button">Play&raquo;</a></p>
				</div>
				<div class="col-md-4">
					<h1>像个小孩</h1>
					<p>Donec id elit non mi porta <span class="footnote">gravida at eget metus</span>.Fusce dapibus, tellus a
						c cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
						 sit amet risus. Etiam portasem malesuada magna mollis euismod. Donec sed odio dui.
					</p>
					<p><a class="btn btn-primary btn-lg" href="#" role="button">About Liu&raquo;</a></p>
				</div>
				<div class="col-md-4">
					<h1>明明白白我的心</h1>
					<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus a
						c cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
						 sit amet risus. Etiam portasem malesuada magna mollis euismod. Donec sed odio dui.
					</p>
					<p><a class="btn btn-primary btn-lg" href="#" role="button">About JackChen&raquo;</a></p>
				</div>
			</div>
			<hr />
			<div class="page-header" id="pictures">
				<h2>Enjoy the beautiful pictures<small>welcome</small></h2><br />
				<div class="row">
					<div class="col-md-3">
						<div class="thumbnail">
							<a href="#"><img src="images/apple.jpg"></a>
							<div class="caption">
							     <h3>Apple</h3>
							</div>
							<div class="img-pop">
								<blockquote>
									<p>Apple is a kind of fruit,and it is good for our health.</p>
								</blockquote>
							</div>
						</div>
					</div>
					<div class="col-md-3">
						<div class="thumbnail">
							<a href="#"><img src="images/fireworks.jpg"></a>
							<div class="caption">
							     <h3>Sunset</h3>
							</div>
							<div class="img-pop">
								<blockquote>
									<p>the sunset is relly attractive.hope to go with you.</p>
								</blockquote>
							</div>
						</div>
					</div>
					<div class="col-md-3">
						<div class="thumbnail">
							<a href="#"><img src="images/orange.jpg"></a>
							<div class="caption">
							     <h3>Orange</h3>
							</div>
							<div class="img-pop">
								<blockquote>
									<p>Orange is also a kind of fruit,it's juice drink nice.</p>
								</blockquote>
							</div>
						</div>
					</div>
					<div class="col-md-3">
						<div class="thumbnail">
							<a href="#"><img src="images/placeholder.jpg"></a>
							<div class="caption">
							     <h3>Cherry</h3>
							</div>
							<div class="img-pop">
								<blockquote>
									<p>I like  eatting cherry very much,you can have a try.</p>
								</blockquote>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-3">
						<div class="thumbnail">
							<a href="#"><img src="images/apple.jpg"></a>
							<div class="caption">
							     <h3>Apple</h3>
							</div>
							<div class="img-pop">
								<blockquote>
									<p>Apple is a kind of fruit,and it is good for our health.</p>
								</blockquote>
							</div>
						</div>
					</div>
					<div class="col-md-3">
						<div class="thumbnail">
							<a href="#"><img src="images/fireworks.jpg"></a>
							<div class="caption">
							     <h3>Sunset</h3>
							</div>
							<div class="img-pop">
								<blockquote>
									<p>the sunset is relly attractive.hope to go with you.</p>
								</blockquote>
							</div>
						</div>
					</div>
					<div class="col-md-3">
						<div class="thumbnail">
							<a href="#"><img src="images/orange.jpg"></a>
							<div class="caption">
							     <h3>Orange</h3>
							</div>
							<div class="img-pop">
								<blockquote>
									<p>Orange is also a kind of fruit,it's juice drink nice.</p>
								</blockquote>
							</div>
						</div>
					</div>
					<div class="col-md-3">
						<div class="thumbnail">
							<a href="#"><img src="images/placeholder.jpg"></a>
							<div class="caption">
							     <h3>Cherry</h3>
							</div>
							<div class="img-pop">
								<blockquote>
									<p>I like  eatting cherry very much,you can have a try.</p>
								</blockquote>
							</div>
						</div>
					</div>
				</div>
			</div>
			
             <div class="panel-group" id="accordion" role="tablist">
             	<h2>Collapse example</h4>
             	<div class="panel panel-default">
             		<div class="panel-heading">
             			<h4 class="panel-title">
             				<a href="#collapseone"  data-toggle="collapse" data-parent="#accordion" aria-expended="true">
             					collapsible with lisgroup
             				</a>
             			</h4>
             		</div>
             		<div class="collapse panel-collapse in" id="collapseone">
            
             				<ul class="list-group">
							  <li class="list-group-item">Dapibus ac facilisis in</li>
							  <li class="list-group-item"><a href="#" >Dapibus ac facilisis in</a></li>
							  <li class="list-group-item"><a href="#" >Dapibus ac facilisis in</a></li>
							  <li class="list-group-item"><a href="#" >Dapibus ac facilisis in</a></li>
							  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
							  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
							</ul>
        
             		</div>
             	</div>
             	<div class="panel panel-default">
             		<div class="panel-heading">
             			<h4 class="panel-title">
             				<a href="#collapsetwo" data-toggle="collapse" data-parent="#accordion">
             					collapse with item
             				</a>
             			</h4>
             		</div>
             		<div class="collapse panel-collapse in" id="collapsetwo">
             			<div class="panel-body">
             				<span class="footnote">Anim pariatur cliche</span> reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. 
             				Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
             				Ad vegan excepteur butcher vice lomo.
             			</div>
             			<div class="panel-footer">
             				this the collapse example
             			</div>
             		</div>
             	</div>
             </div>
             <div style="width: 300px;" class="carousel slide" data-ride="carousel" id="carousel-example-generic">
                     <h2>Carousel</h2>
             		 <ol class="carousel-indicators">
					    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
					    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
					    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
					    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
					  </ol>
             	
             	<div class="carousel-inner" role="listbox">
             		<div class="item active">
             			<img src="images/rose.jpg" />
             		
             		<div class="carousel-caption">
             			<h4>hello</h4>
             			<p>beautiful scenry!</p>
             		</div>
             		</div>
             		<div class="item">
             			<img src="images/thumbnail_fireworks.jpg" />         
             		<div class="carousel-caption">
             			
             		</div>
             		</div>
             	<div class="item">
             			<img src="images/thumbnail_coffee.jpg" />
             		
             		<div class="carousel-caption">
             			
             		</div>
             	</div>
             	<div class="item">
             			<img src="images/fireworks.jpg" />
             		
             		<div class="carousel-caption">
             			
             		</div>
             	</div>
             	<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
             	</div>
             	</div>
             	
             		<div id="wrapper" class="music" style="width: 300px;">
						<audio preload="auto" controls>
							<source src="audio/zmjhb.mp3">
						</audio>
				    </div>
		   
             	<nav>
			<ul class="pagination">
				 	<li>
				      <a href="#" aria-label="Previous">
				        <span aria-hidden="true">&laquo;</span>
				      </a>
				    </li>
				    <li><a href="#">1</a></li>
				    <li><a href="#">2</a></li>
				    <li><a href="#">3</a></li>
				    <li><a href="#">4</a></li>
				    <li><a href="#">5</a></li>
				    <li>
					    <a href="#" aria-label="Next">
					        <span aria-hidden="true">&raquo;</span>
					    </a>
				    </li>
			</ul>
		</nav>
		<div id="footer">
			插入 Dom元素
		</div>
             </div> 
		</div> 
		<div id="backtop" style="display: block;">
			<a href="javascript:;" ><span class="glyphicon glyphicon-circle-arrow-up" aria-hidden="true"></span></a>
		</div>
	</body>
</html>
